<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:0px 0xp 10px 0px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>文件列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="音频列表" name="first">
          <el-table :data="audiolist" stripe border style="width:100%;">
            <el-table-column label="Id" prop="id" width="80"></el-table-column>
            <el-table-column label="音频地址" prop="audio">
              <template slot-scope="scope">
                <!-- <p>{{scope.row.audio}}</p> -->
                <audio :src="scope.row.audio" controls></audio>
              </template>
            </el-table-column>
            <el-table-column label="添加时间" prop="tiem">
              <template slot-scope="scope">
                <span v-if="scope.row.tiem">{{Number(scope.row.tiem) |dateFormat}}</span>
                <span v-else>00:00:00</span>
              </template>
            </el-table-column>
            <el-table-column></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="视频列表" name="second">
          <el-table :data="videolist" stripe border style="width:100%;">
            <el-table-column label="Id" prop="id" width="80"></el-table-column>
            <el-table-column label="视频地址" prop="video">
              <!-- <template slot-scope="scope"> -->
              <!-- <p>{{scope.row.audio}}</p> -->
              <!-- <audio :src="scope.row.audio" controls></audio> -->
              <!-- </template> -->
            </el-table-column>
            <el-table-column label="添加时间" prop="tiem">
              <template slot-scope="scope">
                <span v-if="scope.row.tiem">{{Number(scope.row.tiem) |dateFormat}}</span>
                <span v-else>00:00:00</span>
              </template>
            </el-table-column>
            <el-table-column label="视频名称" prop="videoname"></el-table-column>
            <el-table-column label="视频截图" prop="img" width="120">
              <template slot-scope="scope">
                <img :src="scope.row.img" alt class="imgs" />
              </template>
            </el-table-column>
            <!-- <el-table-column label="视频名称" prop="videoname"></el-table-column> -->
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="文件列表" name="third">
          <el-table :data="filelist" stripe border style="width:100%;">
            <el-table-column label="Id" prop="id" width="80"></el-table-column>
            <el-table-column label="文件名称" prop="filename"></el-table-column>
            <el-table-column label="文件地址" prop="file">
              <template slot-scope="scope">
                <!-- <p>{{scope.row.audio}}</p> -->
                <a :href="scope.row.file">{{scope.row.file}}</a>
              </template>
            </el-table-column>
            <el-table-column label="添加时间" prop="tiem">
              <template slot-scope="scope">
                <span v-if="scope.row.time">{{Number(scope.row.time) |dateFormat}}</span>
                <span v-else>00:00:00</span>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- <el-card>

    </el-card> -->

  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      audiolist: [],
      videolist: [],
      filelist: [],
      activeName: 'first',
      userid: localStorage.getItem('userid') || this.$store.state.userid

    }
  },
  created() {
    this.getaudio()
    this.getfile()
    this.getvideo()
    console.log(process.env.VUE_APP_BASE_URL)
    console.log('https://www.jianshu.com/p/59fb42b02d37')
  },
  methods: {
    // 音频查询
    getaudio() {
      const data = {
        userid: this.userid
      }
      this.$http.post('/audio/get', data).then(res => {
        // console.log(res.data)
        this.audiolist = res.data.message
      })
    },
    // 视频查询
    getfile() {
      const data = {
        userid: this.userid
      }
      this.$http.post('/video/get', data).then(res => {
        // console.log(res.data)
        this.videolist = res.data.message
      })
    },
    // 文件查询
    getvideo() {
      const data = {
        userid: this.userid
      }
      this.$http.post('/file/get', data).then(res => {
        // console.log(res.data,'文件')
        this.filelist = res.data.message
      })
    },
    // 列表切换
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style lang="less" scoped>
.imgs {
  width: 50px;
  height: 50px;
}
</style>

